$form-item-container: (
  'label-width': 130px,
  'line-height': getCssVar(height-control, default),
  'require-mark-color': getCssVar(color, danger),
  'label-left-padding': 6px getCssVar(spacing, base-tight) 6px 0,
  'label-right-padding': 6px 0 6px getCssVar(spacing, base-tight),
  'padding': getCssVar(spacing, tight) getCssVar(spacing, extra-tight) getCssVar(spacing, tight) getCssVar(spacing, extra-tight),
  'font-size': getCssVar(font-size, regular),
  'label-color': getCssVar(color, text, 1),
  'error-font-size': getCssVar(font-size, small),
  'error-color': getCssVar(color, danger),
);

@include b(form-item-container) {
  @include set-component-css-var('form-item-container', $form-item-container);

  width: 100%;
  height: 100%;
  padding: getCssVar('form-item-container', 'padding');

  @include e(label) {
    @include utils-ellipsis;

    flex-shrink: 0;
    font-size: getCssVar('form-item-container', 'font-size');
    color: getCssVar('form-item-container', 'label-color');
  }

  @include m((left, right)) {
    @include flex;

    min-height: getCssVar('form-item-container', 'line-height');

    @include e(label) {
      width: getCssVar('form-item-container', 'label-width');
    }
  }

  @include m((top, bottom)) {
    @include flex(column);
  }

  @include m(top){
    @include e(label) {
      margin-bottom: getCssVar('spacing','extra-tight');
    }
  }

  @include m(bottom){
    @include e(label) {
      margin-top: getCssVar('spacing','extra-tight');
    }
  }

  @include m(left) {
    @include e(label) {
      padding: getCssVar('form-item-container', 'label-left-padding');
      text-align: right;
    }
  }

  @include m(right) {
    @include e(label) {
      padding: getCssVar('form-item-container', 'label-right-padding');
      text-align: left;
    }
  }

  // 必填*的样式
  @include when(required) {
    @include e(label) {
      &::before {
        display: inline-block;
        margin-right: 4px;
        /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
        font-family: SimSun;
        line-height: 1;
        color: getCssVar('form-item-container', 'require-mark-color');
        content: '*';
      }
    }
  }

  @include e(content) {
    @include flex(column);

    position: relative;
    flex-grow: 1;

    @include m((label-none, label-left, label-right)) {
      height: 100%;
    }
  }

  // 编辑器样式
  @include e(editor) {
    position: relative;
    flex-grow: 1;
    height: 100%;
  }

  // 错误区样式
  @include e(error) {
    @include utils-ellipsis;

    position: absolute;
    top: 100%;
    width: 100%;
    font-size: getCssVar('form-item-container', 'error-font-size');
    line-height: calc(getCssVar('form-item-container', 'error-font-size') + 2px);
    color: getCssVar('form-item-container', 'error-color');
    word-wrap: break-word;
  }

  // 错误的样式
  @include when(error){
    .el-input__wrapper{
      box-shadow: 0 0 0 1px getCssVar('form-item-container', 'error-color') inset;
    }    
  }
}
